<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: pink;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div id="box" class="box">
    <h1 id="num"></h1>
  </div>
</body>

</html>
<script>
  /* 防抖  如果一段时间内频繁发生，以最后一次为准
      节流  如果一段时间内容  频繁发生 按照一定时间规律执行*/
  let num = 0
  $("box").addEventListener("mousemove", function () {
    //防抖
    // console.log(123);
    // let myTime = null
    // debounce(function(){

    //   $("num").innerHTML = num++
    // },1000)

    //防抖函数
    // function debounce(fn,duration){
    //   if(window.myTime){
    //     clearTimeout(window.myTime)
    //     window.myTime = null
    //   }
    //   window.myTime = setTimeout(fn,duration)
    // }
    //节流
    throttle(function () {
      $("num").innerHTML = num++
    }, 1000)
    function throttle(fn, duration) {
      if (!window.timeId) {
        window.timeId = setTimeout(function () {
          window.timeId = null;
          fn.call(this)
        }, duration)
      }
    }
  })
  function $(str) {
    return document.getElementById(str)
  }
</script>